<template>
	<view class="main">
		<view class="section">
			<view class="title">设备种类（多选）:</view>
			<view class="content">
				<checkbox-group @change="radioChangeDeviceType" v-model="device_type">
					<!-- 
					<view class="radio">
						<template v-if="device_type.length > 1">
							<checkbox color="#FFCC33" value="燃气报警器" :checked="device_type[0] == '燃气报警器'||device_type[1] == '燃气报警器'"/>燃气报警器
						</template>
						<template v-else-if="device_type.length == 1">
							<checkbox color="#FFCC33" value="燃气报警器" :checked="device_type[0] == '燃气报警器'"/>燃气报警器
						</template>
						<template v-else>
							<checkbox color="#FFCC33" value="燃气报警器"/>燃气报警器
						</template>
					</view> -->
					<view class="radio">
						<checkbox :checked="device_type.includes('有线报警器')" color="#FFCC33" value="有线报警器"/>有线报警器
					</view>
					<view class="radio">
						<checkbox :checked="device_type.includes('无线报警器')" color="#FFCC33" value="无线报警器"/>无线报警器
					</view>
					<view class="radio"> 
						<checkbox :checked="device_type.includes('燃气自闭阀（DN15）')" color="#FFCC33" value="燃气自闭阀（DN15）"/>燃气自闭阀（DN15）
					</view>
					<view class="radio"> 
						<checkbox :checked="device_type.includes('T型三通')" color="#FFCC33" value="T型三通"/>T型三通
					</view>
					<view class="radio">
						<checkbox :checked="device_type.includes('不锈钢波纹管（单承插/单螺纹1000mm）')" color="#FFCC33" value="不锈钢波纹管（单承插/单螺纹1000mm）"/>不锈钢波纹管（单承插/单螺纹1000mm）
					</view>
					<view class="radio">
						<checkbox :checked="device_type.includes('铜制弯头')" color="#FFCC33" value="铜制弯头"/>铜制弯头
					</view>
					<view class="radio">
						<checkbox :checked="device_type.includes('铜制接头')" color="#FFCC33" value="铜制接头"/>铜制接头
					</view>
					<!-- <view class="radio">
						<template v-if="device_type.length > 1">
							<checkbox color="#FFCC33" value="燃气自闭阀＋不锈钢波纹管" :checked="device_type[0] == '燃气自闭阀＋不锈钢波纹管'||device_type[1] == '燃气自闭阀＋不锈钢波纹管'"/>燃气自闭阀＋不锈钢波纹管
						</template>
						<template v-else-if="device_type.length == 1">
							<checkbox color="#FFCC33" value="燃气自闭阀＋不锈钢波纹管" :checked="device_type[0] == '燃气自闭阀＋不锈钢波纹管'"/>燃气自闭阀＋不锈钢波纹管
						</template>
						<template v-else>
							<checkbox color="#FFCC33" value="燃气自闭阀＋不锈钢波纹管"/>燃气自闭阀＋不锈钢波纹管
						</template>
					</view> -->
				</checkbox-group>
			</view>
		</view><!-- section end-->
		<view class="section" v-if="has">
			<view class="title">波纹管数量:</view>
			<view class="content">
				<radio-group @change="radioChangeNum">
					<view class="radio" >
						<radio value="1" :checked="num==1"/>1根
					</view>
					<view class="radio" >
						<radio value="2" :checked="num==2"/>2根
					</view>
					<view class="radio" >
						<radio value="3" :checked="num==3"/>3根
					</view>
					<view class="radio" >
						<radio value="4" :checked="num==4"/>4根
					</view>
				</radio-group>
			</view>
		</view><!-- section end-->
		<view class="section" v-if="has3">
			<view class="title">弯头数量:</view>
			<view class="content">
				<radio-group @change="radioChangeNum3">
					<view class="radio" >
						<radio value="1" :checked="bend_num==1"/>1个
					</view>
					<view class="radio" >
						<radio value="2" :checked="bend_num==2"/>2个
					</view>
					<view class="radio" >
						<radio value="3" :checked="bend_num==3"/>3个
					</view>
					<view class="radio" >
						<radio value="4" :checked="bend_num==4"/>4个
					</view>
				</radio-group>
			</view>
		</view><!-- section end-->
		<view class="section" v-if="has2">
			<view class="title">接头数量:</view>
			<view class="content">
				<radio-group @change="radioChangeNum2">
					<view class="radio" >
						<radio value="1" :checked="num2==1"/>1个
					</view>
					<view class="radio" >
						<radio value="2" :checked="num2==2"/>2个
					</view>
					<view class="radio" >
						<radio value="3" :checked="num2==3"/>3个
					</view>
					<view class="radio" >
						<radio value="4" :checked="num2==4"/>4个
					</view>
				</radio-group>
			</view>
		</view><!-- section end-->
		<view class="section">
			<view class="title">客户名称：</view>
			<view class="content">
				<view class="input_bg">
					<input class="input" v-model="name" placeholder="请输入客户名称"></input>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="title">客户电话：</view>
			<view class="content">
				<view class="input_bg">
					<input class="input" v-model="phone" placeholder="请输入客户电话"></input>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="title">所在区域：</view>
			<view class="content">
				<view class="input_bg">
					<view class="input" @click="selectStreet">
						<template v-if="area == ''">
							<view class="place">请选择</view>
						</template>
						<template v-else>
							<view class="text">重庆市{{area}}{{street}}{{community}}</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="title">详细地址：</view>
			<view class="content">
				<view class="input_bg">
					<input class="input" v-model="address" placeholder="请输入详细地址"></input>
				</view>
			</view>
		</view>
		
		<view class="section">
			<view class="title">客户类型：</view>
			<view class="content">
				<radio-group @change="radioChangeCustType">
					<view class="radio" >
						<radio value="非老旧小区" :checked="cust_type=='非老旧小区'"/>非老旧小区
					</view>
					<view class="radio" >
						<radio value="100米以上高层建筑" :checked="cust_type=='100米以上高层建筑'"/>100米以上高层建筑
					</view>
					<view class="radio" >
						<radio value="生活困难用户" :checked="cust_type=='生活困难用户'"/>生活困难用户
					</view>
				</radio-group>
			</view>
		</view><!-- section end-->
		
		<view class="section">
			<view class="title">安装位置：</view>
			<view class="content">
				<radio-group @change="radioChangeLocation" v-model="location">
					<view class="radio" >
						户内
					</view>
				</radio-group>
			</view>
		</view><!-- section end -->
		<view class="section">
			<view class="title">燃气表位置：</view>
			<view class="content">
				<radio-group @change="radioChangeTableLocation">
					<view class="radio" >
						<radio value="户内" :checked="table_location=='户内'"/>户内
					</view>
					<view class="radio" >
						<radio value="户外" :checked="table_location=='户外'"/>户外
					</view>
				</radio-group>
			</view>
		</view><!-- section end-->
		<view class="section">
			<view class="title">安装前检测情况：</view>
			<view class="content">
				<radio-group @change="radioChangeTest">
					<view class="radio" >
						<radio value="漏气" :checked="setup_test=='漏气'"/>漏气（已告知现场人员）
					</view>
					<view class="radio" >
						<radio value="不漏气" :checked="setup_test=='不漏气'"/>不漏气
					</view>
				</radio-group>
			</view>
		</view><!-- section end-->
		<view class="section">
			<view class="title">用户签字</view>
			<view class="content">
				<template v-if="user_sign == ''">
					<view class="sign" @click="startUserSign">
						点击签字
					</view>
				</template>
				<template v-else>
					<image class="sign" :src="user_sign" @click="startUserSign"></image>
				</template>
			</view>
			
			<view class="intro">
				我已经知晓当前检测情况！
			</view>
		</view><!-- section end-->
		<!-- <view class="section">
			<view class="title">现场情况</view>
			<view class="content">
				<view class="text_bg">
					<textarea class="textarea" v-model="intro" placeholder="最多可输入500字"></textarea>
				</view>
			</view>
		</view> --><!-- section end-->
		<view class="section">
			<view class="title">环境照片</view>
			<view class="content">
				<view class="imgs">
					<view class="item" v-for="(around, index) in around_imgs" :key="index">
						<image class="image" :src="around"></image>
						<image class="del" @click="delImg(1,index)" src="../../static/images/common/del.png"></image>
					</view>
					<view class="item" @click="choosePhoto(1)" v-if="around_imgs.length < 2">
						<image class="image" src="../../static/images/common/add-pic.png"></image>
					</view>
				</view>
			</view>
		</view><!-- section end-->
		<view class="section">
			<view class="title">安装前照片</view>
			<view class="content">
				<view class="imgs">
					<view class="item" v-for="(pre, p_index) in pre_imgs" :key="p_index">
						<image class="image" :src="pre"></image>
						<image class="del" @click="delImg(2,p_index)" src="../../static/images/common/del.png"></image>
					</view>
					<view class="item" @click="choosePhoto(2)" v-if="pre_imgs.length < 2">
						<image class="image" src="../../static/images/common/add-pic.png"></image>
					</view>
				</view>
			</view>
		</view><!-- section end-->
		<view class="section">
			<view class="title">安装后照片</view>
			<view class="content">
				<view class="imgs">
					<view class="item" v-for="(next, n_index) in next_imgs" :key="n_index">
						<image class="image" :src="next"></image>
						<image class="del" @click="delImg(3,n_index)" src="../../static/images/common/del.png"></image>
					</view>
					<view class="item" @click="choosePhoto(3)" v-if="next_imgs.length < 4">
						<image class="image" src="../../static/images/common/add-pic.png"></image>
					</view>
				</view>
			</view>
		</view><!-- section end-->
		<view class="section mb100">
			<view class="title">审批签字</view>
			<view class="content">
				<template v-if="sign == ''">
					<view class="sign" @click="startSign">
						点击签字
					</view>
				</template>
				<template v-else>
					<image class="sign" :src="sign" @click="startSign"></image>
				</template>
			</view>
			
			<view class="intro">
				我已经知晓以上产品的功能及使用方法，也已经获取产品合格证，并自愿安装！安装师傅安装完成后也已经当场测漏显示无漏气情况！
			</view>
		</view><!-- section end-->
		
		<view class="footer">
			<view class="submit-btn" @click="submitEvent()">确认提交</view>
		</view>
		
		<uni-popup ref="userPopup" class="popup-cls" @maskClick="clearUserEvent">
			<view class="pop-info">
				<view class="pop-top">
					用户签字
				</view>
				<view class="center">
					<zwp-draw-pad ref="drawPad2" :width="width" height="420"/>
				</view>
				<view class="bottom">
					<view class="btn mr1" @click="clearUserEvent">清除</view>
					<view class="btn" @click="confirmUserEvent">确认</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" class="popup-cls" @maskClick="clearEvent">
			<view class="pop-info">
				<view class="pop-top">
					用户签字
				</view>
				<view class="center">
					<zwp-draw-pad ref="drawPad" :width="width" height="420"/>
				</view>
				<view class="bottom">
					<view class="btn mr1" @click="clearEvent">清除</view>
					<view class="btn" @click="confirmEvent">确认</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="addressPop" class="popup-cls" @maskClick="clearEvent">
			<view class="pop-info">
				<view class="pupop-btn">
					<view @tap="cancel">取消</view>
					<view @tap="confirm" style="color: #2979ff;">确定</view>
				</view>
				<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view><!-- main end-->
</template>

<script>
	// import {image_upload} from "@/api/common";
	// import {confirm} from "@/api/work";
	export default {
		data() {
			return {
				device_type:'',//设备种类
				hasAlarm:false,//是否有报警器
				hasClosing:false,//是否有自闭阀
				hasPipe:false,//是否有波纹管
				cust_type:'',//客户类型
				num:0,//数量
				num2:0,//接头
				bend_num:0,//弯头
				name:'',//客户名称
				phone:'',//客户电话
				area:'',//所在区
				street:'',//所在街道
				community:'',//所在社区
				address:'',//客户地址
				location:'户内',//安装位置
				table_location:'',//燃汽表位置
				setup_test:'',//安装前检测
				intro:'',//现场情况
				around_imgs:[],//现场情况
				pre_imgs:[],//安装前图片
				next_imgs:[],//安装后图片
				width:375,
				indicatorStyle: `height: 50px;`,
				value:[0,0,0],
				addressList,
				provinceList: [],
				cityList: [],
				areaList: [],
				provinceIndex: 0,
				cityIndex: 0,
				areaIndex: 0,
				animationData: {} ,
				data:{},
				user_sign:'',//用户签字
				sign:'',//审批签字
				has:false,//是否有数量
				has2:false,//是否有接头
				has3:false,//是否有弯头
				hasCache:true
			}
		},
		onLoad(options) {
			let getWindowInfo = uni.getWindowInfo()
			let width = getWindowInfo.screenWidth;
			this.width = width;
			
		},
		onShareTimeline() {
			return {
				title: '燃汽设备安装系统',
				//分享朋友圈的参数
				query: "isShare=1&id=",
			}
		},
		onShareAppMessage(){
		},
		created() {
			
		},
		onShow:function(){
			let that = this;
			let store_data = uni.getStorageSync('storage_key');
			if(store_data){
				that.device_type = store_data.device_type;
				that.num = store_data.num;
				that.num2 = store_data.num2;
				that.bend_num = store_data.bend_num;
				that.name = store_data.name;
				that.phone = store_data.phone;
				that.area = store_data.area;
				that.setup_test = store_data.setup_test;
				that.street = store_data.street;
				that.community = store_data.community;
				that.address = store_data.address;
				that.cust_type = store_data.cust_type;
				that.location = store_data.location;
				that.table_location = store_data.table_location;
				that.intro = store_data.intro;
				that.has = store_data.has;
				if(store_data['around_imgs'].length > 0){
					that.around_imgs = store_data['around_imgs'].split(',');
				}
				if(store_data['pre_imgs'].length > 0){
					that.pre_imgs = store_data['pre_imgs'].split(',');
				}
				if(store_data['next_imgs'].length > 0){
					that.next_imgs = store_data['next_imgs'].split(',');
				}
				that.sign = store_data.sign;
				that.user_sign = store_data.user_sign; 
			}
			console.info(store_data);
			
		},
		onHide:function(){
			if(this.hasCache){
				console.info('开始缓存onHide');
				this.saveCache();
			}
		},
		onUnload:function(){
			uni.removeStorageSync('storage_key');
			// console.info('onunload');
			// if(this.hasCache){
			// 	console.info('开始缓存onunload');
			// 	this.saveCache();
			// }
		},
		methods: {
			saveCache(){
				var data = {
					device_type:this.device_type,
					num:this.num,
					num2:this.num2,
					bend_num:this.bend_num,
					name:this.name,
					phone:this.phone,
					area:this.area,
					street:this.street,
					setup_test:this.setup_test,
					community:this.community,
					address:this.address,
					cust_type:this.cust_type,
					location:this.location,
					table_location:this.table_location,
					intro:this.intro,
					around_imgs:this.around_imgs.join(','),
					pre_imgs:this.pre_imgs.join(','),
					next_imgs:this.next_imgs.join(','),
					sign:this.sign,
					user_sign:this.user_sign,
					has:this.has
				}
				console.info(data)
				uni.setStorageSync('storage_key',data);
			},
			confirm () {
				console.info(this.provinceList[this.provinceIndex])
				console.info(this.cityList[this.cityIndex])
				console.info(this.areaList[this.areaIndex])
				this.area = this.provinceList[this.provinceIndex].name;//区
				if(this.cityList.length > 0){
					this.street = this.cityList[this.cityIndex].name;//街道
				}
				if(this.areaList.length > 0){
					this.community = this.areaList[this.areaIndex].name;//社区
				} 
				this.$refs.addressPop.close()
			},
			cancel(){
				this.$refs.addressPop.close()
			},
			bindChange(e) {
				console.info(e.detail)
				e.detail.value[0] = e.detail.value[0] || 0
				e.detail.value[1] = e.detail.value[1] || 0
				e.detail.value[2] = e.detail.value[2] || 0
				console.info(e.detail.value[2])
				if (e.detail.value[0] != this.provinceIndex) {
					console.log('监听第一列')
					this.provinceChange(e.detail.value[0])
				} else if (e.detail.value[1] != this.cityIndex) {
					console.log('监听第二列')
					this.cityChange(e.detail.value[1])
				} else if (e.detail.value[2] != this.areaIndex) {
					console.log('监听第三列')
					console.log(e.detail.value[2])
					this.areaChange(e.detail.value[2])
				}
			},
			// 监听第一列变化
			provinceChange (e) {
				console.info('provinceChange')
				this.provinceIndex = e
				this.cityIndex = 0
				this.areaIndex = 0
				this.value = [...[e, 0, 0]]
				this.cityList = addressList[e].children
				if(addressList[e].children.length > 0){
					this.areaList = addressList[e].children[0].children
				}else{
					this.areaList = [];
				}
			},
			// 监听第二列变化
			cityChange (e) {
				console.info('cityChange')
				this.cityIndex = e
				this.areaIndex = 0
				// console.log(this.cityIndex, this.areaIndex)
				this.value = [...[this.provinceIndex, e, 0]]
				this.cityList = addressList[this.provinceIndex].children
				
				if(addressList[this.provinceIndex].children.length > 0){
					this.areaList = addressList[this.provinceIndex].children[e].children
				}else{
					this.areaList = [];
				}
			},
			// 监听第三列变化
			areaChange (e) {
				// console.log(this.cityIndex, this.areaIndex)
				this.areaIndex = e
				
				this.value = [...[this.provinceIndex, this.cityIndex, e]]
				this.cityList = addressList[this.provinceIndex].children
				this.areaList = addressList[this.provinceIndex].children[this.cityIndex].children
				console.info('此时的areaIndex:'+this.value)
			},
			delImg(type,index){
				if(type == 1){
					this.around_imgs.some((item, i)=>{
		　　　　　　　　　　if(i==index){
		　　　　　　　　　　　　this.around_imgs.splice(i, 1)
		　　　　　　　　　　　　return true;
		　　　　　　　　　　}
		　　　　　　　　})
				}else if(type == 2){
					this.pre_imgs.some((item, i)=>{
		　　　　　　　　　　if(i==index){
		　　　　　　　　　　　　this.pre_imgs.splice(i, 1)
		　　　　　　　　　　　　return true;
		　　　　　　　　　　}
		　　　　　　　　})
				}else{
					this.next_imgs.some((item, i)=>{
		　　　　　　　　　　if(i==index){
		　　　　　　　　　　　　this.next_imgs.splice(i, 1)
		　　　　　　　　　　　　return true;
		　　　　　　　　　　}
		　　　　　　　　})
				}
			},
			//设备各类
			radioChangeDeviceType(e){
				let that = this;
				this.device_type = e.detail.value;
				console.info(this.device_type)
				if(this.device_type.indexOf("不锈钢波纹管（单承插/单螺纹1000mm）") != -1){
					this.has = true;
				}else{
					this.has = false;
				}
				if(this.device_type.indexOf("铜制接头") != -1){
					this.has2 = true;
				}else{
					this.has2 = false;
				}
				if(this.device_type.indexOf("铜制弯头") != -1){
					this.has3 = true;
				}else{
					this.has3 = false;
				}
			},	
			//数量
			radioChangeNum(e){
				this.num = e.detail.value;
			},
			//接头
			radioChangeNum2(e){
				this.num2 = e.detail.value;
			},
			//弯头
			radioChangeNum3(e){
				this.bend_num = e.detail.value;
			},
			//客户类型
			radioChangeCustType(e){
				console.info(e)
				this.cust_type = e.detail.value;
			},	
			//安装位置
			radioChangeLocation(e){
				console.info(e)
				this.location = e.detail.value;
			},	
			//燃汽安装位置
			radioChangeTableLocation(e){
				console.info(e)
				this.table_location = e.detail.value;
			},
			radioChangeTest(e){
				this.setup_test = e.detail.value;
				console.info(this.setup_test)
			},
			choosePhoto(type) {
				let that = this;
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数，默认9
					sourceType: ['album','camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					sizeType: ['compressed'],//original 原图，compressed 压缩图，默认二者都有
					success(res) {
						console.log('选择图片完成', res);
						uni.compressImage({
						  src: res.tempFilePaths[0],
						  quality: 50,
						  success: ress => {
								that.image=ress.tempFilePath;
								uni.showLoading({
									title:"上传中..."
								});
								image_upload(that.image).then((res)=>{
									uni.hideLoading();
									res = JSON.parse(res);
									console.info(res)
									console.info(res.code)
									if(res.code == 1){
										if(type == 1){
											that.around_imgs.push(res.data);
										}else if(type == 2){
											that.pre_imgs.push(res.data);
										}else{
											that.next_imgs.push(res.data);
										}
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										});
									}
								}).catch((error)=>{
									uni.hideLoading();
									console.log(error);
								});
						  }
						})
					},
					fail() {
						console.log('失败');
					},
					complete() {
						console.log('结束');
					},
				})
			},
			submitEvent(){
				if(this.device_type.length == 0){
					uni.showToast({
						title:'请选择设备种类',
						icon:"none"
					});
					return;
				}
				if(this.has){
					if(this.num.length == 0){
						uni.showToast({
							title:'请选择波纹管数量',
							icon:"none"
						});
						return;
					}
				}
				if(this.has2){
					if(this.num2.length == 0){
						uni.showToast({
							title:'请选择接头数量',
							icon:"none"
						});
						return;
					}
				}
				if(this.has3){
					if(this.bend_num.length == 0){
						uni.showToast({
							title:'请选择弯头数量',
							icon:"none"
						});
						return;
					}
				}
				
				if(this.name.length == 0){
					uni.showToast({
						title:'客户名称不能为空',
						icon:"none"
					});
					return;
				}
				
				if(this.phone.length == 0){
					uni.showToast({
						title:'客户电话不能为空',
						icon:"none"
					});
					return;
				}
				
				if(!this.isvalidPhone(this.phone)){
					uni.showToast({
						title:'客户电话错误',
						icon:"none"
					});
					return;
				}
				
				if(this.area.length == 0){
					uni.showToast({
						title:'请选择区域',
						icon:"none"
					});
					return;
				}
				// if(this.street.length == 0){
				// 	uni.showToast({
				// 		title:'请选择街道',
				// 		icon:"none"
				// 	});
				// 	return;
				// }
				
				// if(this.community.length == 0){
				// 	uni.showToast({
				// 		title:'请选择社区',
				// 		icon:"none"
				// 	});
				// 	return;
				// }
				
				if(this.address.length == 0){
					uni.showToast({
						title:'请输入详细地址',
						icon:"none"
					});
					return;
				}
				
				if(this.cust_type.length == 0){
					uni.showToast({
						title:'请选择客户类型',
						icon:"none"
					});
					return;
				}
				
				if(this.table_location.length == 0){
					uni.showToast({
						title:'请选择燃汽表位置',
						icon:"none"
					});
					return;
				}
				
				if(this.setup_test.length == 0){
					uni.showToast({
						title:'请选择安装前检测情况',
						icon:"none"
					});
					return;
				}
				
				if(this.user_sign.length == 0){
					uni.showToast({
						title:'请用户签字',
						icon:"none"
					});
					return;
				}
				
				if(this.around_imgs.length == 0){
					uni.showToast({
						title:'请上传环境照片',
						icon:"none"
					});
					return;
				}
				if(this.pre_imgs.length == 0){
					uni.showToast({
						title:'请上传安装前照片',
						icon:"none"
					});
					return;
				}
				if(this.next_imgs.length == 0){
					uni.showToast({
						title:'请上传安装后照片',
						icon:"none"
					});
					return;
				}
				
				if(this.sign.length == 0){
					uni.showToast({
						title:'请用户签字',
						icon:"none"
					});
					return;
				}
				
				var data = {
					device_type:this.device_type,
					num:this.num,
					num2:this.num2,
					bend_num:this.bend_num,
					name:this.name,
					phone:this.phone,
					area:this.area,
					setup_test:this.setup_test,
					street:this.street,
					community:this.community,
					address:this.address,
					cust_type:this.cust_type,
					location:this.location,
					table_location:this.table_location,
					around_imgs:this.around_imgs.join(','),
					pre_imgs:this.pre_imgs.join(','),
					next_imgs:this.next_imgs.join(','),
					sign:this.sign,
					user_sign:this.user_sign
				}
				console.info(data);
				let that = this;
				uni.showModal({
				  title: '提示信息',
				  content: '确定提交？',
				  cancelText: "取消",
				  confirmText: "确定",
				  confirmColor: '#000',
				  cancelColor: '#ff0000',
				  success: function (res) {
					if (res.confirm) {
						uni.showLoading({
							title:"提交中..."
						});
						confirm(data).then((res)=>{ 
							uni.hideLoading();
							if(res.code == 1){
								that.hasCache = false;
								uni.removeStorageSync('storage_key')
								uni.showToast({
									title:res.msg,
									icon:"none",
									duration:1500
								});
								setTimeout(function(){
									uni.navigateBack({});
								},1500)
							}else{
								uni.showToast({
									title:res.msg
								});
							}
						}).catch((error)=>{
							uni.hideLoading(); 
							console.log(error);
						});
					} else if (res.cancel) {
					  console.log('用户点击取消');
					}
				  }
				});
				
			},
			isvalidPhone(phone) {
			  let isPhone = /^1[3456789]\d{9}$/ //11位合法手机号码
			  let isMob1 = /0\d{2,3}\d{7,8}/ //不带-的座机：02985111752
			  let isMob2 = /^([0-9]{3,4}-)?[0-9]{7,8}$/ //带一个-：029-85111752
			  let isMob3 = /^\d{3,4}-\d{3,4}-\d{3,4}$/; //带三个-： 0752-250-520
			  if (isMob1.test(phone) || isMob2.test(phone) || isMob3.test(phone) || isPhone.test(phone)) {
			    return true
			  } else {
			    return false
			  }
			},
			confirmEvent(){
				let that = this;
				that.$refs.drawPad.save({}).then(res => {
				    console.log('保存图片的地址', res.tempFilePath)
					that.$refs.drawPad.init();
					that.uploadSign(res.tempFilePath);
				});
				that.$refs.popup.close();
				
			},
			confirmUserEvent(){
				let that = this;
				that.$refs.drawPad2.save({}).then(res => {
				    console.log('保存图片的地址', res.tempFilePath)
					that.$refs.drawPad2.init();
					that.uploadUserSign(res.tempFilePath);
				});
				that.$refs.userPopup.close();
				
			},
			clearUserEvent(){
				this.$refs.drawPad2.init();
			},
			startUserSign(){
				this.$refs.userPopup.open('bottom')
			},
			uploadUserSign(image){
				let that = this;
				uni.showLoading({
					title:"上传中..."
				});
				image_upload(image).then((res)=>{
					uni.hideLoading();
					res = JSON.parse(res);
					if(res.code == 1){
						that.user_sign = res.data;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						});
					}
				}).catch((error)=>{
					uni.hideLoading();
					console.log(error);
				});
			},
			//打开签字
			startSign(){
				console.info('11')
				this.$refs.popup.open('bottom')
			},
			clearEvent(){
				this.$refs.drawPad.init();
			},
			selectStreet(){
				this.$refs.addressPop.open('bottom')
			},
			uploadSign(image){
				let that = this;
				uni.showLoading({
					title:"上传中..."
				});
				image_upload(image).then((res)=>{
					uni.hideLoading();
					res = JSON.parse(res);
					console.info(res)
					console.info(res.code)
					if(res.code == 1){
						that.sign = res.data;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						});
					}
				}).catch((error)=>{
					uni.hideLoading();
					console.log(error);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
	  width: 100%;
	  height: 100%;
	  background-color: white;
	}
	.main {
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 30rpx;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
		.mb100{
			padding-bottom: 150rpx;
		}
		.section{
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			.title{
				font-size: 28rpx;
			}
			.content{
				display: flex;
				flex-direction: column; 
				margin-top: 10rpx;
				.input_bg{
					display: flex;
					flex-direction: column;
					height: 60rpx;
					border: 1px solid #CCC;
					padding-left: 10rpx;
					padding-right: 10rpx;
					.input{
						font-size: 28rpx;
						height: 60rpx;
						line-height: 60rpx;
						.place{
							color: gray;
						}
						.text{
							color: #000000;
						}
					}
				}
				.text_bg{
					display: flex;
					flex-direction: column;
					height: 160rpx;
					border: 1px solid #CCC;
					padding: 10rpx;
					.textarea{
						font-size: 28rpx;
					}
				}
				.imgs{
					display: flex;
					// padding-left: 10rpx;
					// padding-right: 10rpx;
					flex-direction: row;
					flex-wrap: wrap;
					.item{
						width: 33.3%;
						height:220rpx; 
						.image{ 
							width:85%;
							height:85%;
						}
						.del{
							width:50rpx;
							height:50rpx;
							margin-left: -30rpx;
							margin-top: -20rpx;
							z-index: 99;
							position: absolute;
						}
					}
				}
				.radio{
					margin-top: 15rpx;
					font-size: 28rpx;
				}
				.sign{
					text-align: center;
					height: 300rpx;
					line-height: 300rpx;
					font-size: 28rpx;
					background-color: #F8F8F8;
				}
			}
			.intro{
				font-size: 28rpx;
				color: red;
				margin-top: 15rpx;
			}
			
		}
	}
	.footer{
		height: 80rpx;
		width: 100%;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
		.submit-btn{
			background-color: $uni-main-color;
			color: white;
			font-size: 28rpx;
			height: 80rpx;
			width: 100%;
			text-align: center;
			line-height: 80rpx;
		}
	}
	/****/
	.popup-cls{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.pop-info{
		width:100%;
		background-color: white;
		display: flex;
		flex-direction: column;
		.pupop-btn{
			height: 40px;
			display: flex;
			align-items: center;
			padding: 0 30upx;
			justify-content: space-between;
			font-size: 28rpx;
		}
	}
	.pop-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
	}
	
	.center{
		height: 420rpx;
		margin: 30rpx 0rpx 0rpx 0rpx;
		background-color: #F8F8F8;
	}
	
	.bottom{
		display: flex;
		flex-direction: row;
		justify-content: center;
		.btn{
			flex: 1;
			height:80rpx;
			background-color: $uni-main-color;
			// border-radius: 40rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			// margin-bottom: 30rpx;
			font-size: 28rpx;
		}
		.mr1{
			margin-right: 1rpx;
		}
	}
	
	.picker-view {
		width: 100%;
		height: 340rpx;
		margin-top: 20rpx;
		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
			line-height: 50px;
			font-size: 28rpx;
		}
	}
</style>
